<template>
  <div class="app-container">
    <!-- <div class="cardBox">
      <el-form :inline="true" class="search-form">
        <el-row style="display: flex; flex-wrap: wrap">
          <el-col :span="19">
            <el-form-item label="名称：">
              <el-input
                :maxlength="20"
                v-model="searchForm.name"
                class="marginBottom"
                placeholder="请输入商户名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input
                onkeyup="value=value.replace(/\D/g,'')"
                v-model="searchForm.user_cellphone"
                class="marginBottom"
                placeholder="请输入手机号"
                clearable
              />
            </el-form-item>
            <el-form-item label="分类：">
              <el-select v-model="searchForm.level" placeholder="请选择分类">
                <el-option
                  v-for="item in CateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="margin: 5px 0; text-align: right">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resettingWay"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div> -->
    <div class="grouping cardBox">
      <el-row class="marginBottom" :gutter="20" style="display: flex">
        <el-col>
          <el-button
            icon="el-icon-circle-plus-outline"
            type="primary"
            size="small"
            @click="savemerchantWay('/groupbuying/groupbuyingselection/save')"
            >添加商品</el-button
          >
        </el-col>
        <el-col :span="8" style="float: right">
          <div class="right-panel el-button-group">
            <el-button
              class=""
              icon="el-icon-refresh"
              size="mini"
              @click="resettingWay"
            ></el-button>
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  class=""
                  icon="el-icon-s-operation"
                  size="mini"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-col>
        <el-table
          :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
          }"
          v-loading="loading"
          highlight-current-row
          :data="productlibraryList"
          style="width: 100%"
        >
          <el-table-column
            v-for="fruit in tableThead"
            :key="fruit"
            :label="tableTheadOptions[fruit].label"
            align="center"
          >
            <template slot-scope="scope">
              <div
                v-if="fruit == 'thumbnail'"
                style="width: 40px; height: 40px; margin: 0 auto"
              >
                <el-image
                  :src="scope.row[fruit]"
                  :preview-src-list="[scope.row[fruit]]"
                />
              </div>
              <div
                v-else-if="fruit == 'slider_image'"
                style="width: 40px; height: 40px; margin: 0 auto"
              >
                <el-image
                  :src="scope.row[fruit][0]"
                  :preview-src-list="scope.row[fruit]"
                />
              </div>
              <div v-else-if="fruit == 'province_name'">
                {{ scope.row.province_name }}
                {{ scope.row.city_name }}
                {{ scope.row.county_name }}
              </div>
              <div v-else-if="fruit == 'type'">
                <el-tag v-if="scope.row[fruit] == 1" size="mini">个体</el-tag>
                <el-tag v-else size="mini">企业</el-tag>
              </div>
              <div v-else>
                {{ scope.row[fruit] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="上下架">
            <template slot-scope="scope">
              <el-switch
                @change="switchShowWay(scope.row)"
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="2"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            width="180"
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                style="margin-right: 10px"
                type="primary"
                size="mini"
                @click="
                  savemerchantWay(
                    '/groupbuying/groupbuyingselection/save?id=' + scope.row.id
                  )
                "
              >
                修改
              </el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="delGradeWay(scope.row)"
              >
                <el-button type="danger" size="mini" slot="reference">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col class="marginTop marginBottom" style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.count"
          @pagination="getListWay"
        />
      </el-col>
    </div>
  </div>
</template>
  
<script>
import {
  getLocalGoodsList,
  delLocalGoods,
  localGoodsChange,
} from "@/api/groupbuying/index";
const tableTheadOption = {
  id: {
    label: "id",
    field: "id",
  },
  loc_pur_mer_id: {
    label: "商户ID",
    field: "loc_pur_mer_id",
  },
  name: {
    label: "商品名称",
    field: "name",
  },
  type: {
    label: "类型",
    field: "type",
  },
  thumbnail: {
    label: "商品缩略图",
    field: "thumbnail",
  },
  slider_image: {
    label: "商品轮播图",
    field: "slider_image",
  },
  pay_type: {
    label: "支付方式",
    field: "pay_type",
  },
  group_purchase_price: {
    label: "团购价",
    field: "group_purchase_price",
  },
  scribe_price: {
    label: "原价",
    field: "scribe_price",
  },
  inventory: {
    label: "库存",
    field: "inventory",
  },
  initial_sales: {
    label: "初始销量",
    field: "initial_sales",
  },
};

const allTableThead = [
  "id",
  "loc_pur_mer_id",
  "name",
  "type",
  "thumbnail",
  "slider_image",
  "pay_type",
  "group_purchase_price",
  "scribe_price",
  "inventory",
  "initial_sales",
];
const defaultTableThead = [
  "name",
  "type",
  "thumbnail",
  "slider_image",
  "group_purchase_price",
  "scribe_price",
  "inventory",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchForm: {
        // 搜索参数
        page: 1,
        count: 10,
      },
      productlibraryList: [],
      total: 0, // 列表总条数
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getLocalGoodsList(this.searchForm)
        .then((res) => {
          this.loading = false;
          res.data.list.forEach((item) => {
            item.slider_image = item.slider_image.split(",");
          });
          this.productlibraryList = res.data.list;
          this.total = res.data.total;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 重置搜索内容
    resettingWay() {
      this.searchForm = {
        page: 1,
        count: 10,
      };
      this.getListWay();
    },
    // 删除
    delGradeWay(row) {
      this.loading = true;
      delLocalGoods({ id: row.id })
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.loading = false;
          this.$messages.success(res.msg);
          this.getListWay();
        })
        .catch((err) => {
          this.$messages.error(err.msg);
          this.loading = false;
        });
    },
    savemerchantWay(url) {
      this.$router.push(url);
    },
    switchShowWay(val) {
      this.loading = true;
      var obj = {
        status: val.status,
        id: val.id,
      };
      localGoodsChange(obj)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.loading = false;
          this.$messages.success(res.msg);
          this.getListWay();
        })
        .catch((err) => {
          this.$messages.error(err.msg);
          this.loading = false;
          this.getListWay();
        });
    },
  },
};
</script>
  
  <style>
</style>